<!--
@description    绩效报表-我的绩效-达成率
@author         秦俊强
@email          458112865@qq.com
@create         2020-02-22 16:00
-->

<template>
  <div class="chart-box">

    <!-- loading start -->
    <div class="loading-box" v-if="loading">
      <a-icon class="icon-loading" type="loading" />
    </div>
    <!-- loading end -->
    <!-- 数据信息 start -->
    <div class="item-box">
      <div class="item-date">
        <span class="title">统计时间：</span>
        <span class="value">{{ yearMonth.text }}</span>
      </div>

      <div class="item-org">
        <span class="title">部门：</span>
        <span class="value">{{ data.view.indexOrgName }}</span>
      </div>

      <div class="item-name">
        <span class="title">负责人：</span>
        <span class="value">{{ data.view.scorerName }}</span>
      </div>

      <div class="item-name">
        <span class="title">指标项：</span>
        <span class="value">{{ data.detail.indexName }}</span>
      </div>
    </div>
    <!-- 数据信息 end -->


    <!-- 达成率 start -->
    <div class="completion-on-box">
      <div class="title-max">{{ data.detail.indexValueName }}</div>

      <!-- 达成率图表 -->
      <div class="completion-on-chart" ref="chartCompletion"></div>
      <a-table :columns="columns" :dataSource="dataSource[0]" :showHeader=false :pagination=false size="middle" v-show="dataSource[0].length">
        <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
      </a-table>
    </div>
    <!-- 达成率 end -->
  </div>
</template>



<script>
  /* 引入图表插件 */
  import echarts from 'echarts';

  /* 引入柱图配置模板 */
  import { barOptions, barOptionsDb } from './chart.bar.config.js';

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /**
   * api 接口
   * getGradeIndexChart => 获取绩效达成率
   * */
  import { getGradeIndexChart } from '@/api/api.js';


  export default {
    props: {
      data: {
        type: Object,
        default: {}
      },

      yearMonth: {}
    },
    data() {
      return {
        loading: true,
        dataSource : {
          0:[],
          1:[]
        },
        columns: []
      }
    },
    created() {
      this.columns = [{
          align:"center",
          dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'name' },
      }].concat( new Array(12).fill('').map((item,index)=>{
          return {
              align:"center",
              dataIndex: 'm' + (index>10?index : '0'+index)
          }
      }) ) 
    },
    mounted() {
      this.$nextTick(() => {
        this.chartCompletion = echarts.init(this.$refs.chartCompletion);
        this.chartCompletionOn = echarts.init(this.$refs.chartCompletionOn);

        // 监听 window 窗口变化，自适应图表
        window.addEventListener('resize', this.resizeChart);
      });
    },

    methods: {

      /* 图表大小自适应 */
      resizeChart() {
        this.chartCompletion && this.chartCompletion.resize();
        this.chartCompletionOn && this.chartCompletionOn.resize();
      },

      /* 获取绩效达成率 */
      getGradeChart() {
        let view = this.data.view;
        let detail = this.data.detail;
        let param = {
          "indexDepart": view.indexOrgCode,           // 机构编码
          "indexYearMonth": this.yearMonth.value,     // 绩效年月
          "scorerCode": view.scorerCode,              // 绩效部门责任人
          "indexCode": detail.indexCode,              // 指标编码
          "indexValueCode": detail.indexValueCode     // 指标值编码
        };

        this.loading = true;
        apiService(getGradeIndexChart(param)).then((res) => {
          this.loading = false;

          let result = res.result;
          debugger;
          if (result && result.indexView) {
            this.initChartCompletion(result.indexView);
          }

          this.resizeChart();
        }).catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
      },

      /* 初始化达成率 */
      initChartCompletion(data) {
        let option = this.getOptionsDb(data,0);
        this.chartCompletion.setOption(option);
      },


      /* 返回图表渲染参数 */
      getOptionsDb(data,index) {
        let options = barOptionsDb();
        let values = data.value, contrasts = data.contrasts;
        if(values.series1.value.length === 4){
            options.xAxis[0].data = ['3月','6月','9月','12月'];
        }
        debugger;
        let series1 = [], series2 = [], series3 = [] ,series4 = [] ,series5 = [];
        options.series[0].name = values.series1.series1Title;
        options.series[1].name = values.series2.series2Title;
        options.series[2].name = values.series3.series3Title;
        options.series[3].name = contrasts.series1.series1Title;
        options.series[4].name = contrasts.series2.series2Title;
        let column1 = {};
        let column2 = {};
        let column3 = {};
        let column4 = {};
        let column5 = {};
        for(let i = 1; i <= 12; i++){
          if(1 < 10){
              column1["m0"+i] = values.series1.value[i-1];
              column2["m0"+i] = values.series2.value[i-1];
              column3["m0"+i] = values.series3.value[i-1];
              column4["m0"+i] = contrasts.series1.value[i-1];
              column5["m0"+i] = contrasts.series2.value[i-1];
          }else{
              column1["m"+i] = values.series1.value[i-1];
              column2["m"+i] = values.series2.value[i-1];
              column3["m"+i] = values.series3.value[i-1];
              column4["m"+i] = contrasts.series1.value[i-1];
              column5["m"+i] = contrasts.series2.value[i-1];
          }
        }
        this.dataSource[index] = [
          {
            name: `${values.series1.series1Title}<span class="mine-color-91caff"></span>`,
            ...column1
          },
          {
            name: `${values.series2.series2Title}<span class="mine-color-1890FF"></span>`,
            ...column2
          },
          {
            name: `${values.series3.series3Title}<span class="mine-color-186aff"></span>`,
            ...column3
          },
          {
            name: `${contrasts.series1.series1Title}<span class="mine-color-8eec7f"></span>`,
            ...column4
          },
          {
            name: `${contrasts.series2.series2Title}<span class="mine-color-ffd818"></span>`,
            ...column5
          },
        ]
        options.legend.data = [values.series1.series1Title,values.series2.series2Title,values.series3.series3Title,contrasts.series1.series1Title,contrasts.series2.series2Title]
        for (let i = 0; i < 12; i++) {
          let _series1 = parseFloat(values.series1.value[i]);
          let _series2 = parseFloat(values.series2.value[i]);
          let _series3 = parseFloat(values.series3.value[i]);
          let _series4 = parseFloat(contrasts.series1.value[i]);
          let _series5 = parseFloat(contrasts.series2.value[i]);

          series1.push(_series1);
          series2.push(_series2);
          series3.push(_series3);
          series4.push(_series4);
          series5.push(_series5);
        }

        options.series[0].data = series1;
        options.series[1].data = series2;
        options.series[2].data = series3;
        options.series[3].data = series4;
        options.series[4].data = series5;
        
        

        return options;
      }

    }
  }
</script>



<style lang="less" scoped>
  .chart-box {
    .title-max {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .item-box {
      overflow: hidden;
      margin-bottom: 20px;

      [class*="item-"] {
        float: left;
        padding: 2px 10px;
        margin-right: 10px;
        border: 1px solid #e7e7e7;
        background-color: #fafafa;
        border-radius: 3px;
      }

      .title {
        font-size: 12px;
        color: #666666;
      }
      .value {
        font-weight: bold;
      }
    }
    .completion-on-box{
      margin-bottom: 40px;
    }
    .completion-chart,
    .completion-on-chart {
      height: 300px;
      // margin-bottom: 50px;
      margin-bottom: 10px;
      background-color: #fafafa;
      position: relative;
    }
    
    .completion-on-chart {
      height: 400px;
    }

    .loading-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.4);
      text-align: center;
      padding-top: 35%;
    }
    
  }
</style>
<style lang="less">
    .completion-on-block{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mine-color-91caff{
      width: 28px;
      height: 14px;
      background: #91caff;
      border-radius: 2px;
    }
    .mine-color-1890FF{
      width: 28px;
      height: 14px;
      background: #1890FF;
      border-radius: 2px;
    }
    .mine-color-186aff{
      width: 28px;
      height: 14px;
      background: #186aff;
      border-radius: 2px;
    }
    .mine-color-8eec7f{
      width: 28px;
      height: 14px;
      display: flex;
      align-items: center;
      position: relative;
      &::before{
        content: '';
        width: 100%;
        height: 1px;
        background: #8eec7f;
      }
      &::after{
        content: '';
        width: 12px;
        height: 12px;
        background: #ffffff;
        border: 1px solid #8eec7f;
        border-radius: 50%;
        position: absolute;
        left: 8px;
        top: 1px;
        display: block;
      }
    }
    .mine-color-ffd818{
      width: 28px;
      height: 14px;
      display: flex;
      align-items: center;
      position: relative;
      &::before{
        content: '';
        width: 100%;
        height: 1px;
        background: #ffd818;
      }
      &::after{
        content: '';
        width: 12px;
        height: 12px;
        background: #ffffff;
        border: 1px solid #ffd818;
        border-radius: 50%;
        position: absolute;
        left: 8px;
        top: 1px;
        display: block;
      }
    }
</style>
